<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cssTest-right, .cssTest-left, .cssTest-top, .cssTest-bottom{
            float:left;
            width:200px;
            height:200px;
            border:2px solid red;
            position:relative;
            left:20px;
            top:20px;
            margin-left: 60px;
            border-radius: 4px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
        }
        .cssTest-right:before, .cssTest-right:after,
        .cssTest-left:before, .cssTest-left:after,
        .cssTest-top:before, .cssTest-top:after,
        .cssTest-bottom:before, .cssTest-bottom:after{
            content:"";
            border:20px solid red;
            width:0;
            height:0;
            position:absolute;
        }
        .cssTest-right:after, .cssTest-left:after,
        .cssTest-top:after, .cssTest-bottom:after{
             content:"";
             border:20px solid #ffffff;
             width:0;
             height:0;
             position:absolute;
         }
        .cssTest-right:before, .cssTest-right:after,
        .cssTest-left:before, .cssTest-left:after{
            border-top-color:transparent;
            border-bottom-color:transparent;
            top:calc(50% - 20px);
        }
        .cssTest-right:before{
            border-right-color:transparent;
            left:calc(100% + 1px);
        }
        .cssTest-left:before{
            border-left-color:transparent;
            right:calc(100% + 1px);
        }
        .cssTest-right:after{
            border-right-color:transparent;
            left:calc(100% - 1px);
        }
        .cssTest-left:after{
            border-left-color:transparent;
            right:calc(100% - 1px);
        }

        .cssTest-top:before, .cssTest-top:after,
        .cssTest-bottom:before, .cssTest-bottom:after{
            border-left-color:transparent;
            border-right-color:transparent;
            left:calc(50% - 20px);
        }
        .cssTest-top:before{
            border-top-color:transparent;
            bottom:calc(100% + 1px);
        }
        .cssTest-bottom:before{
            border-bottom-color:transparent;
            top:calc(100% + 1px);
        }
        .cssTest-top:after{
            border-top-color:transparent;
            bottom:calc(100% - 1px);
        }
        .cssTest-bottom:after{
            border-bottom-color:transparent;
            top:calc(100% - 1px);
        }
    </style>
</head>
<body>
<div class="cssTest-right"></div>
<div class="cssTest-left"></div>
<div class="cssTest-top"></div>
<div class="cssTest-bottom"></div>
</body>
</html>